<template>
    <el-drawer v-model="isShowDrawer" direction="rtl" :before-close="handleClose" :size="curDrawerSize">
        <template #header="{ titleId, titleClass }">
            <div class="drawer-header" :id="titleId" :class="titleClass">
                <div class="zs-icon zs-text-blue zs-space-right-sm">
                    <el-icon>
                        <Grid />
                    </el-icon>
                </div>
                <div class="zs-title zs-text-black">项目详情</div>
            </div>
        </template>
        <template #default>
            <el-container class="drawer-container">
                <el-main>
                    <el-scrollbar>
                        <!-- 必要时才定义id 请务必确保id唯一 遵从命名规范 -->
                        <div class="zs-card zs-space-bottom" id="detail-drawer-demo-card-01">
                            <div class="zs-align-center zs-space-top zs-space-bottom-sm">
                                <div class="zs-icon zs-text-blue zs-space-right-sm">
                                    <el-icon>
                                        <Orange />
                                    </el-icon>
                                </div>
                                <div class="zs-title">基本信息</div>
                            </div>
                            <div class="zs-table-header-none zs-space-left-bg">
                                <el-table :data="tableData">
                                    <el-table-column prop="curKey" label="字段" width="180" />
                                    <el-table-column prop="curValue" label="值" />
                                </el-table>
                            </div>
                        </div>
                        <div class="zs-card" id="detail-drawer-demo-card-02">
                            <div class="zs-align-center zs-space-top zs-space-bottom-sm">
                                <div class="zs-icon zs-text-blue zs-space-right-sm">
                                    <el-icon>
                                        <Orange />
                                    </el-icon>
                                </div>
                                <div class="zs-title">扩展信息</div>
                            </div>
                            <div class="zs-table-header-none zs-space-left-bg">
                                <el-table :data="tableData">
                                    <el-table-column prop="curKey" label="字段" width="180" />
                                    <el-table-column prop="curValue" label="值" />
                                </el-table>
                            </div>
                            <div class="zs-text-sm zs-text-gray zs-space-left-bg zs-space-top-bg zs-space-bottom-sm">
                                项目简介：</div>
                            <div class="zs-card-gray zs-space-left-bg">
                                合生汇位于西大望路与广渠路交汇处，地铁14号线九龙山站附近，地处东三环外，定位于集购物、餐饮、娱乐、休闲、儿童体验业态于一体的精致生活体验式购物中心，合生汇的深夜食堂约2万平方米，聚合了200余家特色餐饮商户；饭店周边集聚了相声剧场以及直播、街舞大赛、篮球竞技等平台近30家，商场一层的喜剧现场(脱口秀俱乐部)和五层的寰映影城，都营业到凌晨2点，六层的星聚会KTV营业到凌晨
                                6点。</div>
                            <div class="zs-text-sm zs-text-gray zs-space-left-bg zs-space-top-bg zs-space-bottom-sm">
                                入驻品牌：</div>
                            <div class="zs-card-gray zs-space-left-bg">
                                合生汇位于西大望路与广渠路交汇处，地铁14号线九龙山站附近，地处东三环外，定位于集购物、餐饮、娱乐、休闲、儿童体验业态于一体的精致生活体验式购物中心，合生汇的深夜食堂约2万平方米，聚合了200余家特色餐饮商户；
                            </div>
                        </div>
                    </el-scrollbar>
                </el-main>
                <el-aside width="100px">
                    <el-tabs tab-position="right">
                        <el-tab-pane>
                            <template #label>
                                <el-link href="#detail-drawer-demo-card-01">基本信息</el-link>
                            </template>
                        </el-tab-pane>
                        <el-tab-pane>
                            <template #label>
                                <el-link href="#detail-drawer-demo-card-02">扩展信息</el-link>
                            </template>
                        </el-tab-pane>
                    </el-tabs>
                </el-aside>
            </el-container>
        </template>
        <!-- 详情抽屉 footer可以不要 根据实际需求定-->
        <template #footer>
            <div>
                <el-button class="zs-btn-md" :color="curBlue" plain @click="cancelClick">取消</el-button>
                <el-button class="zs-btn-md" :color="curBlue" @click="confirmClick">保存</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useStore } from 'vuex'
let store = useStore()
const curDrawerSize = ref(store.state.uiDrawerSize)
const curBlue = ref(store.state.uiBlue)

const props = defineProps({
    isShow: { type: Boolean, default: false },
})
const emit = defineEmits(['close'])

console.log('接收到父级传来的数据')
console.log(props.isShow)

const isShowDrawer = ref(props.isShow)

watch(
    () => props.isShow,
    (newVal, oldVal) => {
        console.log('监听基本类型数据testStr')
        console.log('new', newVal)
        console.log('old', oldVal)
        isShowDrawer.value = newVal
    }
)

const handleClose = (done) => {
    emit('close', { isShow: false })
    done()
}
function cancelClick() {
    isShowDrawer.value = false
    emit('close', { isShow: false })
}
function confirmClick() {
    ElMessageBox.confirm(`Are you confirm to chose ? ?`)
        .then(() => {
            isShowDrawer.value = false
            emit('close', { isShow: false })
        })
        .catch(() => {
            // catch error
        })
}

const detailData = ref({
    projectCode: 'XMB0101',
    name: '北京朝阳合生汇',
    local: '北京市',
})
const tableData = ref(
    [
        { curKey: '项目编码：', curValue: detailData.value.projectCode },
        { curKey: '项目名称：', curValue: detailData.value.name },
        { curKey: '省市信息：', curValue: detailData.value.local }
    ]
)
</script>

<style scoped lang="scss">
.drawer-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 12px;
    padding-left: 20px;
}

.drawer-container {
    height: 100%;
}


</style>
